<template>
    <div class="error-page-wrap">
        <div class="error-page">
            <img src="~@/assets/img/404.png" alt="" class="pic-404">
            <div class="bullshit">
                <div class="bullshit-oops">OOPS!</div>
                <div class="bullshit-headline">{{ message }}</div>
                <div v-if="!showLogout" class="bullshit-info">{{info}}</div>
                <div v-if="showLogout" class="logout-box">
                    <el-button type="primary" @click="logout">退出</el-button>
                </div>
                 <div v-if="showHome" class="logout-box">
                    <el-button type="primary" @click="logHome">返回可用菜单</el-button>
                </div>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
import { useStore } from 'vuex';
import { useRoute} from 'vue-router';

const route = useRoute();
const store = useStore();

const props = defineProps({
    message: {
        default: '页面不存在~'
    },
    info: {
        default: '请检查您输入的网址是否正确，请点击以下按钮返回主页'
    },
    code: {
        type: Number,
        default: 0
    }
})


const showLogout = computed(() => {
    return [401, 40000001, 40000002, 403].includes(props.code);
});

const showHome = computed(() => {
   return [405].includes(props.code);
});

function logout() {
    store.dispatch('logout', false);
    if(route.name == 'login') {
        window.location.reload();
    }
}

function logHome() {
    store.dispatch('goHome');
}


</script>

<style lang="scss" scoped>
$primaryColor: var(--el-color-primary);

.error-page-wrap {
    background: #fff;
    width: 100%;
    height: 100vh;
    min-width: 1180px;
}
.error-page {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    min-width: 1180px;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .pic-404 {
        width: 300px;
        margin-right: 100px;
    }
    .bullshit {
        position: relative;
        width: 300px;
        padding: 30px 0;
        overflow: hidden;
        text-align: left;
    }
    .bullshit-oops {
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: bolder;
        line-height: 40px;
        color: $primaryColor;
        opacity: 0;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-name: slideUp;
        animation-name: slideUp;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .bullshit-headline {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        color: #222;
        opacity: 0;
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-name: slideUp;
        animation-name: slideUp;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .bullshit-info {
        margin-bottom: 30px;
        font-size: 13px;
        line-height: 21px;
        color: gray;
        opacity: 0;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-name: slideUp;
        animation-name: slideUp;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    @keyframes slideUp {
        0% {
            opacity: 0;
            transform: translateY(60px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    p {
        color: #999fa7;
        font-size: 16px;
    }

    .logout-box {
        margin-top: 20px;
    }
}
</style>

